<template>
  <div class="min-h-screen bg-gradient-to-b from-skyprimary-light via-blue-50 to-white flex flex-col items-center p-4 sm:p-6 relative overflow-hidden">
    <!-- Decorative Stars -->
    <div class="absolute top-10 left-10 text-yellow-300 opacity-60 animate-pulse">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
      </svg>
    </div>
    <div class="absolute top-32 right-16 text-pink-300 opacity-50 animate-pulse" style="animation-delay: 0.5s;">
      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
      </svg>
    </div>
    <div class="absolute bottom-24 left-20 text-blue-300 opacity-40 animate-pulse" style="animation-delay: 1s;">
      <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
      </svg>
    </div>

    <!-- Main Container -->
    <div class="w-full max-w-2xl bg-white rounded-3xl shadow-2xl p-6 sm:p-8 relative border-4 border-skyprimary-light">
      <!-- Decorative Corner Stars -->
      <div class="absolute -top-3 -left-3 w-10 h-10 bg-gradient-to-br from-yellow-300 to-yellow-400 rounded-full flex items-center justify-center shadow-lg">
        <span class="text-white text-xl">★</span>
      </div>
      <div class="absolute -top-3 -right-3 w-10 h-10 bg-gradient-to-br from-pink-300 to-pink-400 rounded-full flex items-center justify-center shadow-lg">
        <span class="text-white text-xl">★</span>
      </div>

      <!-- Title with sparkle effect -->
      <h1 class="text-3xl sm:text-4xl font-black text-center mb-6 bg-gradient-to-r from-skyprimary via-blue-400 to-skyprimary-dark bg-clip-text text-transparent drop-shadow-sm relative">
        <span class="relative inline-block">
          曼波音乐盒
          <span class="absolute -top-1 -right-6 text-yellow-400 text-2xl animate-pulse">✨</span>
        </span>
      </h1>

      <!-- Avatar Card with enhanced design -->
      <div class="relative bg-gradient-to-br from-skyprimary via-blue-400 to-skyprimary-dark rounded-2xl p-6 mb-6 flex items-center justify-between shadow-xl overflow-hidden">
        <!-- Shine effect -->
        <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white to-transparent opacity-20"></div>
        <!-- Decorative pattern -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-white opacity-5 rounded-full -mr-16 -mt-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-white opacity-5 rounded-full -ml-12 -mb-12"></div>

        <div class="text-white relative z-10">
          <h2 class="text-2xl sm:text-3xl font-black mb-1 drop-shadow-md">爱吃曼波</h2>
          <p class="text-lg sm:text-xl font-bold opacity-90 drop-shadow">纯真白切基</p>
        </div>
        <div class="relative">
          <div class="absolute inset-0 bg-gradient-to-r from-yellow-300 to-pink-300 rounded-full blur-md opacity-60 animate-pulse"></div>
          <img src="/avatar.png" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full shadow-2xl border-4 border-white flex-shrink-0 relative z-10" alt="avatar" />
        </div>
      </div>

      <!-- Sound Section Title with decoration -->
      <div class="flex items-center justify-center gap-2 mb-6 relative">
        <div class="flex-grow h-1 bg-gradient-to-r from-transparent via-skyprimary to-transparent rounded-full"></div>
        <div class="flex items-center gap-2 bg-gradient-to-r from-skyprimary-light to-blue-100 px-4 py-2 rounded-full shadow-md">
          <svg class="w-5 h-5 text-skyprimary-dark animate-pulse" fill="currentColor" viewBox="0 0 20 20">
            <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
          </svg>
          <h3 class="text-lg font-black text-skyprimary-dark">音效区域</h3>
          <svg class="w-5 h-5 text-skyprimary-dark animate-pulse" fill="currentColor" viewBox="0 0 20 20">
            <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
          </svg>
        </div>
        <div class="flex-grow h-1 bg-gradient-to-r from-skyprimary to-transparent rounded-full"></div>
      </div>

      <!-- Sound Buttons Grid -->
      <div
        v-if="sounds.length"
        class="grid grid-cols-2 gap-3 sm:gap-4 w-full"
      >
        <SoundButton
          v-for="(sound, i) in sounds"
          :key="i"
          :label="sound.label"
          :src="sound.src"
        />
      </div>

      <p v-else class="text-gray-400 text-center mt-10">正在加载音效...</p>

      <!-- Footer decoration -->
      <div class="mt-6 flex justify-center gap-2 opacity-60">
        <span class="text-yellow-400">⭐</span>
        <span class="text-pink-400">💖</span>
        <span class="text-blue-400">🎵</span>
        <span class="text-purple-400">✨</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SoundButton from './components/SoundButton.vue'

const sounds = ref([])

onMounted(async () => {
  try {
    const res = await fetch('/sounds.json')
    sounds.value = await res.json()
  } catch (e) {
    console.error('加载音效失败:', e)
  }
})
</script>
